<template>
  <div class="page-common photo-info">
    <!--1.0实现的是图片详情和缩略图-->
    <div class="desc">
      <!--图片详情-->
      <div class="title">
        <h4>{{photoinfo.title}}</h4>
        {{photoinfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}  {{photoinfo.click}}次浏览
      </div>
    </div>
    <!--缩略图-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li  v-for="(item, index) in photoinfilist" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <img :src="item.src" height="100" @click="openImg">
        </li>
      </ul>
    </div>
    <p v-html="photoinfo.content"></p>

    <!--2.0评论组件-->
    <common :id="id"></common>
  </div>
</template>
<script>
  import common from '../components/Common.vue'
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        id:0, //图片的id
        msg:'图片详情',
        photoinfo:[], //图片详情
        photoinfilist:[] //图片缩略图
      }
    },
      components: {
        common
      },
      created(){
        this.id = this.$route.params.id;
        this.getbacicphotoinfo();
        this.getimglist();
    },
    methods:{
      getbacicphotoinfo(){
          let that = this;
          that.axios.get("../static/getimageInfo.json",{}).then(function (res) {
              let data = res.data;
            if(data.status !=0){
              Toast(data.message("请求失败"));
            }
//            id = that.id
            that.photoinfo = data.message[0];
          });
      },
      getimglist(){
        let that = this;
        that.axios.get("../static/getthumimage.json",{}).then(function (res) {
          let data = res.data;
          if(data.status !=0){
            Toast(data.message("请求失败"));
          }
//            id = that.id
          that.photoinfilist = data.message;
        });
      },
      openImg(){
      }
    }
  }
</script>
<style scoped>
  /*图片详情样式*/
  #desc{
    padding: 10px;
  }
  .desc  .title h4{
    color: #0094ff;
  }

  .desc.title p{
    color:rgba(0,0,0,0.4);
    margin-top: 10px;
  }

  .desc .title .line{
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0,0,0,0.4);
  }

  .mui-content,.mui-content ul{
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border-right:0px;
    border-bottom:0px;
  }
  .mui-grid-view.mui-grid-9{
    border-top:0px;
    border-left:0px;
  }

  /* 9宫格缩略图的样式*/
  .mui-content img{
    width: 100px;
    height: 100px;
  }
</style>
